<template>
	<view class="container">
		<!-- <u-navbar title="收货地址" :autoBack="true"></u-navbar> -->
		<!-- 加载中状态 -->
		<view v-if="logining" class="loading-container">
			<u-loading-icon></u-loading-icon>
			<text>数据加载中...</text>
		</view>
		<!-- 加载完成状态 -->
		<view v-else>
			<!-- 无数据提示 -->
			<view v-if="addressList.length === 0" class="empty-tip">
				暂无数据
				<!-- 添加新地址按钮 -->
				<view class="add-btn">
					<u-button type="primary" icon="plus" shape="circle" @click="addNewAddress" :disabled="loginingdel"
						:loading="loginingdel">新建收货地址</u-button>
				</view>
			</view>
			<!-- 正常内容展示 -->
			<view v-else>
				<scroll-view scroll-y class="address-list">
					<!-- 地址列表 -->
					<view class="address-item" v-for="(item, index) in addressList" :key="index">
						<view class="address-content">
							<view class="address-info">
								<text
									class="address-detail">{{item.province}}{{item.city}}{{item.district}}{{item.street}}</text>
								<text class="address-detail">{{item.detailAddress}}</text>
							</view>
							<view class="user-info">
								<text class="user-name">{{item.name}}</text>
								<text class="user-phone">{{item.phone}}</text>
							</view>
						</view>
						<view class="address-footer">
							<u-tag v-if="item.isDefault" text="默认" plain type="primary" size="mini"
								shape="circle"></u-tag>
							<u-tag v-if="!item.isDefault" :key="item.tag" :text="tagkey[item.tag]"
								:type="item.tag === 'home' ? 'success' : 'primary'" size="mini" shape="circle"></u-tag>
							<view class="action-buttons">
								<!-- 普通状态显示图标 -->
								<u-icon v-if="!loginingdel" name="edit-pen" size="30" color="#0b94c6"
									@click="editAddress(item)"></u-icon>
								<u-icon v-if="!loginingdel" name="trash" size="30" color="#ff0000"
									@click="deleteAddress(item.id)"></u-icon>
								<!-- 加载中显示的图标 -->
								<u-loading-icon v-if="loginingdel"></u-loading-icon>
							</view>
						</view>
					</view>
					<!-- 添加新地址按钮 -->
					<view class="add-btn">
						<u-button type="primary" icon="plus" shape="circle" @click="addNewAddress"
							:disabled="loginingdel" :loading="loginingdel">新建收货地址</u-button>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return {
				logining: false,
				loginingdel: false,
				tagkey: {
					'home': '家',
					'company': '公司',
					'school': '学校',
					null: '无'
				},
				addressList: []
			}
		},
		methods: {
			onShow() {
				this.loadaddress();
			},
			async loadaddress() {
				try {
					this.logining = true;
					const res = await httpsend('loadaddress');
					if (res?.code === 1) {
						this.addressList = res.data;
					} else {
						this.$api.msg(res.msg);
					}
					this.logining = false;
				} catch (err) {
					console.log('err', err);
					this.logining = false;
				}
			},
			addNewAddress() {
				uni.navigateTo({
					url: '/pages/addressinfo/addressset'
				})
			},
			editAddress(item) {
				uni.navigateTo({
					url: `/pages/addressinfo/addressset?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			async deleteAddress(id) {
				// 先显示确认对话框
				const modalRes = await new Promise((resolve) => {
					uni.showModal({
						title: '提示',
						content: '确定要删除该地址吗？',
						success: resolve
					});
				});
				// 用户点击了确认
				if (modalRes.confirm) {
					try {
						this.loginingdel = true;
						const res = await httpsend('deladdress',JSON.stringify({id:id}));
						if (res?.code === 1) {
							const index = this.addressList.findIndex(item => item.id === id);
							if (index !== -1) {
								this.addressList.splice(index, 1);
							}
						}
						this.loginingdel = false;
						this.$api.msg(res.msg);
					} catch (err) {
						console.log('err', err);
						this.loginingdel = false;
					}

				}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
	}

	.empty-tip {
		text-align: center;
		padding: 20rpx;
		color: #999;
	}

	.address-list {
		height: calc(100vh - 44px);
		padding: 20rpx;
		box-sizing: border-box;
	}

	.address-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.address-content {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.address-detail {
		display: block;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.address-detail:first-child {
		margin-bottom: 10rpx;
	}

	.user-info {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 30rpx;
		color: #333;
		margin-right: 30rpx;
	}

	.user-phone {
		font-size: 28rpx;
		color: #666;
	}

	.address-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.action-buttons {
		display: flex;
	}

	.action-buttons .u-icon {
		margin-left: 30rpx;
	}

	.add-btn {
		margin-top: 40rpx;
	}

	.add-btn .u-btn {
		height: 80rpx;
	}
</style>